<template>
	<div class="msg-item" :class="{'self':userID == msgData.from}">
		<!-- 文本消息 -->
		<div class="msg-container type-string" v-if="msgType=='string' && stringData">
			<avatar></avatar>
			<div class="content">{{stringData}}</div>
			<div class="status" v-if="msgData.sending || msgData.sendFail">
				<img v-if="msgData.sendFail" @click="$emit('msgItemTap','MSG_FAIL',msgData)" src="@/assets/icon-fail.png">
				<img v-if="msgData.sending" src="@/assets/loading.gif">
			</div>
		</div>
		
		<div class="msg-container type-answer" v-if="msgType=='answer' && answerData">
			<div class="avator">
				<img src="@/assets/icon_collection.png"></img>
			</div>
			<div class="content">
				<div v-for="(item,index) in answerData" :key="index">
					<span v-if="item.type=='txt'">{{item.content}}</span>
					<div v-if="item.type=='img'" class="answerImg">
						<img :src="item.content"></img>
					</div>
				</div>
			</div>
		</div>
		<!-- 待选列表消息 -->
		<div class="msg-container type-list" v-if="msgType=='list' && listData">
			<div class="avator">
				<img src="@/assets/icon_collection.png"></img>
			</div>
			<div class="content">
				<div class="list-box">
					<div class="tit">{{msgData.payload.extension}}</div>
					<div class="item" v-for="(item,index) in listData" :key='index' @click="$emit('msgItemTap','LIST_ITEM',item)">{{item.question}}</div>
				</div>
			</div>
		</div>
		<!-- 案例推荐消息 -->
		<div class="msg-container type-case" v-if="msgType=='case' && caseData">
			<div class="avator">
				<img src="@/assets/icon_collection.png"></img>
			</div>
			<div class="content">
				<div class="caseItem">
					<div class="cell_1">{{caseData.title}}</div>
					<div class="cell_2">
						<span>{{caseData.area}} &sup2;</span>
						<span>|</span>
						<span>{{caseData.house_type}}</span>
						<span>|</span>
						<span>{{caseData.design_style.name}}</span>
					</div>
					<div class="cell_3">
						<img :src="caseData.display_cover"></img>
					</div>
				</div>
			</div>
		</div>
		<!-- 商品推荐消息 -->
		<div class="msg-container type-goods" v-if="msgType=='goods'&&goodsData">
			<div class="avator">
				<img src="@/assets/icon_collection.png"></img>
			</div>
			<div class="content">
				<div class="shopBox">
					<div class="shopImg">
						<img v-if="goodsData.main_imgurl" :src="goodsData.main_imgurl"></img>
					</div>
					<div class="cell">
						<span class="row1">{{goodsData.product_title}}</span>
						<span class="row2">￥ {{goodsData.price}}</span>
					</div>
				</div>
			</div>
			<div class="status" v-if="msgData.sending || msgData.sendFail">
				<img v-if="msgData.sendFail" @click="$emit('msgItemTap','MSG_FAIL',msgData)" src="@/assets/icon-fail.png">
				<img v-if="msgData.sending" src="@/assets/loading.gif">
			</div>
		</div>
		<!-- 图片消息 -->
		<div class="msg-container type-picture" v-if="msgType=='picture'">
			<avatar></avatar>
			<div class="content">
				<img class="img" :src="pictureData[1].url" :style="{height:imageStyle(pictureData,'h'),width:imageStyle(pictureData,'w')}"></img>
			</div>
			<div class="status" v-if="msgData.sending || msgData.sendFail">
				<img v-if="msgData.sendFail" @click="$emit('msgItemTap','IMG_FAIL',msgData)" src="@/assets/icon-fail.png">
				<img v-if="msgData.sending" src="@/assets/loading.gif">
			</div>
		</div>
		
		<div class="msg-container type-store" v-if="msgType=='store'&&storeData">
			<avatar></avatar>
			<div class="content">
				<div class="shopBox">
					<div class="shopImg">
						<img :src="storeData.store_logo"></img>
					</div>
					<div class="cell">
						<span class="row1">{{storeData.store_name}}</span>
						<span class="row2">{{storeData.age}}年老店{{storeData.is_carry ==1 ? ' | 支持配送' : ''}}</span>
					</div>
				</div>
			</div>
			<div class="status" v-if="msgData.sending || msgData.sendFail">
				<img v-if="msgData.sendFail" @click="$emit('msgItemTap','IMG_FAIL',msgData)" src="@/assets/icon-fail.png">
				<img v-if="msgData.sending" src="@/assets/loading.gif">
			</div>
		</div>
		
		<div class="msg-container type-store" v-if="msgType=='designer'&&designerData">
			<avatar></avatar>
			<div class="content">
				<div class="shopBox">
					<div class="shopImg">
						<img :src="designerData.avatar.path"></img>
					</div>
					<div class="cell">
						<span class="row1">{{designerData.name}}</span>
						<span class="row2">从业{{ designerData.employ_year }}年 方案{{designerData.case_num}} {{ designerData.start_offer }}-{{ designerData.end_offer }}元/㎡</span>
						<span class="row3">
							<span v-for="t in designerData.design_style">{{ t.name }}</span>
						</span>
					</div>
				</div>
			</div>
			<div class="status" v-if="msgData.sending || msgData.sendFail">
				<img v-if="msgData.sendFail" @click="$emit('msgItemTap','IMG_FAIL',msgData)" src="@/assets/icon-fail.png">
				<img v-if="msgData.sending" src="@/assets/loading.gif">
			</div>
		</div>
		
		<!-- 系统消息 -->
		<div class="msg-container type-system" v-if="msgType=='system' && systemData">
			<span>{{systemData}}</span>
		</div>
		<!-- 推荐施工队消息 -->
		<div class="msg-container type-team" v-if="msgType=='team'&& teamData">
			<avatar></avatar>
			<div class="content">
				<div class="shopBox">
					<div class="shopImg">
						<img :src="teamData.avatar.path"></img>
					</div>
					<div class="cell">
						<span class="row1">{{teamData.title}}</span>
						<span class="row2">方案 {{ teamData.case_num }} | 评价 {{ teamData.comment_num }} | {{ teamData.start_offer }}-{{ teamData.end_offer }}万/套均价</span>
						<div class="row3">
							<span v-for="t in teamData.design_style">{{ t.name }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import avatar from './avatar.vue'
	export default{
		props:['userID','msgData'],
		components: {
			avatar
		},
		data(){
			return{
				screenWidth:0
			}
		},
		computed:{
			msgType(){
				if(this.msgData.type=='TIMImageElem'){
					return 'picture'
				}
				let description = JSON.parse(this.msgData.payload.description) || this.msgData.payload.description;
				return description.format
			},
			listData(){
				if(this.msgType=='list'){
					let description = JSON.parse(this.msgData.payload.description) || this.msgData.payload.description;
					let ary = JSON.parse(this.msgData.payload.data) || [];
					ary.map(item=>{
						item.chat_id=description.chat_id || ''
					})
					return ary
				}else{
					return ''
				}
			},
			answerData(){
				if(this.msgType=='answer'){
					return JSON.parse(this.msgData.payload.data).answer
				}else{
					return ''
				}
			},
			stringData(){
				if(this.msgType=='string'){
					return this.msgData.payload.data
				}else{
					return ''
				}
			},
			pictureData(){
				if(this.msgType=='picture'){
					return this.msgData.payload.imageInfoArray
				}
			},
			goodsData(){
				if(this.msgType=='goods'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			},
			storeData(){
				if(this.msgType=='store'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			},
			caseData(){
				if(this.msgType=='case'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			},
			systemData(){
				if(this.msgType=='string'){
					return this.msgData.payload.data
				}else{
					return ''
				} 
			},
			teamData(){
				if(this.msgType=='team'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			},
			designerData(){
				if(this.msgType=='designer'){
					return JSON.parse(this.msgData.payload.data)
				}else{
					return ''
				}
			},
		},
		created(){
			// const res = uni.getSystemInfoSync();
			// this.screenWidth = res.screenWidth;
		},
		methods:{
			imageStyle(item,type){
				let maxWidth = 328;
				let imgWidth = item[1].width;
				let imgHeight = item[1].height;
				let resWidth = 0;
				let resHeight = 0;
				if(imgWidth<=maxWidth){
					resWidth = imgWidth;
					resHeight = imgHeight;
				}else{
					resWidth = maxWidth;
					resHeight = (resWidth/imgWidth)*imgHeight
				}
				
				return type=='w'?resWidth + 'px':resHeight + 'px'
			}
		}
	}
</script>

<style lang="less">
	.msg-item{
		.msg-container{
			display: flex;
			padding:20px 40px;
			.avator{
				width: 52px;
				height: 52px;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.content{
				display: flex;
				flex-wrap: wrap;
				word-break:break-all;
				padding: 8px 14px;
				background: #FFFFFF;
				border-radius: 0 22px 22px 22px;
				font-size: 20px;
				color: #333333;
				margin: 10px 0 0 18px;
				max-width: 358px;
			}
			.status{
				display: flex;
				align-items: center;
				padding-right: 20px;
				padding-top: 20px;
				img{
					width: 32px;
				}
			}
			&.type-string{}
			&.type-case{
				.content{
					border-radius: 8px;
					.caseItem{
						display: flex;
						flex-direction: column;
						.cell_1{
							font-size: 20px;
							font-weight: 500;
				            color: #333333;
						}
						.cell_2{
							font-size: 16px;
							font-weight: 400;
							line-height: 40px;
							color: #A0A0A0;
							text{
								padding:0 6px;
							}
						}
						.cell_3{
							width: 328px;
							height: 185px;
							img{
								border-radius: 8px;
								width: 100%;
							}
						}
					}
				}
			}
			&.type-goods{
				.content {
					padding: 0;
					border-radius: 0px 2px 2px 2px;
					background: #F8F8F8;
				
					.shopBox {
						display: flex;
						padding: 10px;
						width: 520px;
				
						.shopImg {
							width: 106px;
							height: 106px;
							overflow: hidden;
							margin: 0 14px;
				
							img {
								width: 100%;
								height: 100%;
								border-radius: 4px;
							}
						}
				
						.cell {
							flex: 1;
							display: flex;
							justify-content: space-between;
							flex-direction: column;
							.row1 {
								font-size: 20px;
								font-weight: 400;
								color: #333333;
								text-overflow: -o-ellipsis-lastline;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								line-clamp: 2;
								-webkit-box-orient: vertical;
							}
				
							.row2 {
								font-size: 18px;
								font-weight: 600;
								color: #DBA954;
							}
						}
					}
				
				}
			}
			&.type-answer{
				.content{
					.answerImg{
						width: 328px;
						img{
							width: 100%;
						}
					}
				}
			}
			&.type-list{
				.content{
					background: #F8F8F8;
					.list-box{
						max-width:300px;
						padding: 10px;
						.tit{
							color: #333333;
							font-size: 20px;
							font-weight: 600;
							margin-bottom: 10px;
						}
						.item{
							font-size: 18px;
							color: #333;
							background: #e4e4e4;
							padding: 10px;
							margin-bottom: 10px;
							border-radius: 2px;
						}
					}
				}
			}
			&.type-picture{
				.content{
					padding: 0 !important;
					text{
						font-size: 28px;
						font-weight: 500;
						color: #333333;
					}
					// .img{
					// 	width: 468px;
					// }
				}
			}
			&.type-store{
				.content {
					padding: 0;
					border-radius: 0px 8px 8px 8px;
					background: #F8F8F8;
					.shopBox {
						display: flex;
						padding: 20px 0;
						width: 328px;
						.shopImg {
							width: 50px;
							height: 50px;
							border-radius: 50%;
							overflow: hidden;
							margin: 0 12px;
				
							img {
								width: 100%;
								height: 100%;
								border-radius: 8px;
							}
						}
				
						.cell {
							flex: 1;
							display: flex;
							flex-direction: column;
							padding-right: 10px;
							justify-content: space-between;
							.row1 {
								font-size: 20px;
								font-weight: 500;
								color: #333333;
							}
				
							.row2 {
								font-size: 16px;
								font-weight: 400;
								color: #939393;
							}
							.row3{
								span{
									display: inline-block;
									width: 40px;
									height: 18px;
									background: #F9F6F3;
									opacity: 1;
									border-radius: 9px;
									color: #A98F68;
									font-size: 10px;
									margin-right: 10px;
								}
							}
						}
					}
				
				}
			}
			&.type-system{
				padding: 20px 28px;
				font-size: 16px;
				font-weight: 400;
				justify-content: center;
			}
			&.type-team{
				.content {
					padding: 0;
					border-radius: 0px 8px 8px 8px;
					background: #F8F8F8;
				
					.shopBox {
						display: flex;
						padding: 20px 0;
				
						.shopImg {
							width: 56px;
							height: 56px;
							border-radius: 50%;
							overflow: hidden;
							margin: 0 12px;
				
							img {
								width: 100%;
								height: 100%;
								border-radius: 4px;
							}
						}
				
						.cell {
							flex: 1;
							display: flex;
							flex-direction: column;
							padding-right: 10px;
							.row1 {
								font-size: 20px;
								font-weight: 500;
								color: #333333;
							}
				
							.row2 {
								font-size: 16px;
								font-weight: 400;
								color: #939393;
								margin: 8px 0 18px 0;
							}
							
							.row3{
								font-size: 16px;
								color: #A98F68;
								text{
									background: #F9F6F3;
									border-radius: 9px;
									padding: 4px 8px;
									margin-right:12px;
								}
							}
						}
					}
				
				}
			}
		}
		
		&.self{
			.msg-container{
				flex-direction: row-reverse;
				.content{
					border-radius: 22px 0px 22px 22px;
					margin: 10px 18px 0 0;
				}
			}
			.type-string{
				.content{
					background: #DEC493;
				}
			}
		}
	}
</style>
